<template>
    <div>
        <a-modal title="添加系统" centered v-model:visible="visible" :width="600" okText="保存" @ok="handleSave" @cancel="handleCancel">
            <a-form layout="inline" :model="form">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="选择系统" :span="24" name="systemName" v-if="visible">
                            <div>
                                <HSearchMultiSelectCell :default-value="form.systemName" allowClear type="reportSystem" label="systemName" valueLabelField="systemName" keyField="systemName" @success="handleSelectChange" />
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue/es';
import { HSearchMultiSelectCell } from '@/components';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        HSearchMultiSelectCell
    },
    emits: ['success'],
    setup(props, { emit }) {
        const state = reactive<any>({
            form: {
                systemName: []
            },
            systemList: [],
            visible: false
        });
        const open = () => {
            state.form.systemName = [];
            state.visible = true;
        };
        const handleSelectChange = (val) => {
            state.systemList = [...val];
        };
        const handleSave = async () => {
            const list = state.systemList.map((item) => ({
                ...item,
                isSettingReport: '1'
            }));
            const { success, errorMsg } = await api.requireReportModel.saveSystemReportSetting([...list]);
            if (success) {
                state.visible = false;
                message.success('添加成功');
                emit('success');
            } else {
                message.error(errorMsg);
            }
        };
        const handleCancel = () => {
            state.visible = false;
        };
        return {
            ...toRefs(state),
            open,
            handleSelectChange,
            handleSave,
            handleCancel
        };
    }
});
</script>

<style scoped>
</style>